<template>
  <div class="userGroup">

    <el-dialog title="加入组" :visible.sync="isOpen" :append-to-body=true width="30%">
        <el-select v-model="waitAdd" multiple placeholder="请选择">
          <el-option
            v-for="item in notAddGroups"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select><br><br><br>
        <el-button type="primary" @click="addGroup()">完成</el-button>
    </el-dialog>

    

    <el-button type="primary" @click="isOpen = true">加入组</el-button>
    <br /><br /><br />
    <el-row>
      <el-col :span="9" ><el-input placeholder="组名" v-model="searchName" ><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input></el-col>
    </el-row>
    <br />
    <el-table :data="list">
          <el-table-column fixed prop="name" label="组名" width="150"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" size='mini' @click="deleteGroup(scope.row.id)" >解除</el-button>
            </template>
          </el-table-column>
        </el-table>
  </div>
</template>

<script>
import UserAdd from './add'
import qs from 'qs';

export default {
  name: "UserGroup",
  components:{UserAdd}
  ,props:['fMemberId']
  ,data() {
    return {
      isOpen:false
      ,list: [
      ]
      ,notAddGroups:[]
      ,memberId:''
      ,waitAdd:[]
      ,searchName:''
    };
  }
  ,created(){
    this.memberId = this.fMemberId;
    if(this.memberId !=null){
      this.findAddGroup();
      this.findNotAddGroup();
    }
  }
  ,watch:{
    fMemberId(val){
      this.memberId = this.fMemberId;
      this.findAddGroup();
      this.findNotAddGroup();
    }
    ,searchName(val){
      this.findAddGroup();
    }
  }
  ,methods:{
    findAddGroup(){
      let that = this;
      this.$axios
        .get("member/findAddGroup", {
          params: {'id':this.memberId,'name':this.searchName}
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.list = data.data;
          } else {
            alert(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
           that.$message.error("网路请求异常");
        });
    }
    ,findNotAddGroup(){
      let that = this;
      this.$axios
        .get("member/findNotAddGroup", {
          params: {'id':this.memberId}
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.notAddGroups = data.data;
          } else {
            alert(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
           that.$message.error("网路请求异常");
        });
    }
    ,addGroup(){
      let that = this;
      this.$axios
        .get("member/addGroup",{
          params:{'groupIds':this.waitAdd , 'id':this.memberId}
          ,paramsSerializer: params =>{
            return qs.stringify(params,{indices:false})
          }
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.waitAdd = [];
            this.findAddGroup();
            this.findNotAddGroup();
            this.isOpen = false;
          } else {
            alert(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
           that.$message.error("网路请求异常");
        });
    }
    ,deleteGroup(groupId){
      let that = this;
      this.$axios
        .get("member/deleteGroup", {
          params: {'id':this.memberId,'groupId':groupId}
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.$message({
              message: '解除成功',
              type: 'success'
            });
            this.findAddGroup();
            this.findNotAddGroup();
          } else {
           this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
